<template>
	<div class="shopRoot">
		<div class="ctx">
			<title text="购物车"></title>
			<div class="content">
				<scroll-view refresher-enabled="true" scroll-y="true" :refresher-triggered="isRefresh"
					@refresherrefresh="onRefresh()">
					<item class="item" v-for="(item, k) in shop.data" :i="item" :key="k">
					</item>
				</scroll-view>
				<div class="counter">
					<!-- 全选 -->
					<div class="check_all">
						<xxl-checkbox @change="checkAll" :val="shop.isCheckAll" class="check"
							d="25"></xxl-checkbox><span>全选</span>
					</div>
					<div class="total">
						<span>合计:</span><span class="icon">￥</span><span class="much_money">{{ moneyFormat(much_money)
						}}</span>
						<div class="botton" @click="topay()"><xxl-botton>结算</xxl-botton></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

import item from "./item.vue";
import { mapGetters, mapState } from "vuex";
import api from "../../api";
export default {
	name: 'Shop',

	data() {
		return {
			isRefresh: false
		};
	},
	computed: {
		...mapGetters({ much_money: 'shopMoney' }),
		...mapState(['shop'])
	},
	mounted() {
		// console.log(this);
	},
	updated() {
		console.log("购物车更新");
	},
	watch: {
		inme(d) {
			if (d) {
				this.$store.dispatch('getShopData')
			}
		}
	},
	methods: {
		checkAll(b) {
			this.$store.commit("checkShopAll", b)
		},
		async topay() {
			if (this.user.isLogin) {
				let data = await api.addOrder(this.$store.getters.checkedShop)
				if (data.code == 200) {
					uni.navigateTo({
						"url": "/pack_payment/index?id="+data.data
					})
				}
			} else {
				uni.navigateTo({
					"url": "/pack_log/login/login",
				})
			}
		},
		async onRefresh() {
			if (this.isRefresh) { return }
			this.isRefresh = true
			let timeout = setTimeout(() => {
				this.isRefresh = false
			}, 3000)
			await this.$store.dispatch('getShopData')
			clearTimeout(timeout)
			this.isRefresh = false
		}
	},
	props: {
		inme: {
			default: false,
		}
	},
	components: {
		item
	}
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.shopRoot {
	height: 100%;
}

.ctx {
	height: 100%;

	scroll-view {
		height: calc(100% - 50px);
	}

	.content {
		height: calc(100% - $uni-nav);
		background: $uni-bg-color-g;
	}
}

.counter {
	height: 50px;
	max-height: 52px;
	background: white;
	border-bottom: 1px solid $uni-bg-color-g;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.check_all {
	display: flex;
	margin: 0px 15px;

	.check {
		margin-right: 5px;
	}
}

.total {
	display: flex;
	align-items: center;

	.icon {
		font-size: 10px;
	}

	.icon,
	.much_money {
		color: orangered;
	}
}

.botton {
	margin: 0px 10px;
}
</style>